<script>
  import ItemRec from './ItemRec.svelte'
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

  export let data = []
  export let defaultValue = null
  export let defaultText = ''
  let _text = ''
  let _value = null
  let dpShow = false
  let isClearActive = false

  function getChild(d, v) {
    let r = null
    if (!Array.isArray(d)) {
      throw 'not array'
    }
    d.every(x => {
      if (x.value == v) {
        r = x
        return false
      }
      if (Array.isArray(x.children)) {
        r = getChild(x.children, v)
      }
      if (r != null) return false
      return true
    })
    return r
  }

  const defaultItem = getChild(data, defaultValue)
  _value = defaultItem?.value
  _text = defaultItem?.text ?? (defaultText ? defaultText : '请选择')
  const handleInputClick = () => {
    dpShow = data.length === 0 ? false : !dpShow
  }
  const handleDpClick = e => {
    const svg = e.target.closest('svg')
    if (svg) {
      const item = svg.closest('.z-sts-item')
      if (!item) return
      if (item.classList.contains('z-sts-item-collopse')) {
        item.classList.remove('z-sts-item-collopse')
      } else {
        item.classList.add('z-sts-item-collopse')
      }
      return
    }
    const itemText = e.target.closest('.z-sts-item-text')
    if (itemText) {
      dpShow = !dpShow
      const value = itemText.dataset.value
      _text = itemText.innerText
      _value = value
      dispatch('change', {
        value: _value,
      })
    }
  }

  function handleBlur() {
    dpShow = false
  }

  function handleArrowMouseEnter(e) {
    if (!_value) return
    isClearActive = true
    e.currentTarget
      .getElementsByTagName('use')[0]
      .setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#z-clear')
  }
  function handleArrowMouseLeave(e) {
    if (!_value) return
    isClearActive = false
    e.currentTarget
      .getElementsByTagName('use')[0]
      .setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#z-arrow')
  }
  function handlerInputArrowClick(e) {
    if (isClearActive) {
      _value = null
      _text = ''
      e.stopPropagation()
      isClearActive = false
      e.currentTarget
        .getElementsByTagName('use')[0]
        .setAttributeNS(
          'http://www.w3.org/1999/xlink',
          'xlink:href',
          '#z-arrow'
        )
      dispatch('change', {
        value: _value,
      })
    }
  }
</script>

<div style="display:none">
  
</div>

<div class="sts" tabindex="0" onblur={handleBlur}>
  <div
    class="z-sts-select"
    onmouseenter={handleArrowMouseEnter}
    onmouseleave={handleArrowMouseLeave}
    onclick={handleInputClick}
  >
    <div class="z-sts-select-input {_value ? '' : 'noselect'}">{_text}</div>
    <div class="z-sts-select-input-dp" onclick={handlerInputArrowClick}>
      <svg viewBox="64 64 896 896" focusable="false" fill="currentColor">
        <use xlink:href="#z-arrow" />
      </svg>
    </div>
  </div>
  <div
    class="z-sts-dp {dpShow ? '' : 'hide'}"
    onclick={handleDpClick}
    unselectable="on"
    onselectstart={() => false}
  >
    <ItemRec {data} />
  </div>
</div>

<style>
  .sts {
    width: 100%;
    text-align: left;
    position: relative;
    box-sizing: border-box;
  }
  .sts:focus {
    outline: none !important;
    box-shadow: 0 0 4px #40a9ff;
  }
  .z-sts-select {
    width: 100%;
    height: 2em;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    display: flex;
    padding: 0.2em 0.5em;
    box-sizing: border-box;
  }
  .z-sts-select:hover {
    border: 1px solid #40a9ff;
  }
  .z-sts-select-input {
    flex-grow: 1;
  }
  .z-sts-select-input-dp {
    width: 1em;
    color: #d9d9d9;
    transform: translateY(0.3em);
  }
  .z-sts-dp {
    width: 100%;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
      0 9px 28px 8px rgb(0 0 0 / 5%);
    padding: 0.2em 0.5em;
    box-sizing: border-box;
    position: absolute;
    top: calc(2em + 2px);
    left: 0;
    user-select: none;
    max-height: 12em;
    overflow: auto;
  }
  .hide {
    display: none;
  }
  .noselect {
    color: #d9d9d9;
  }
</style>
